<template>
	<div class="Driverindex">
      <el-row class="elrow">
			 <el-button 
			 	type="primary" 
			 	icon="el-icon-edit" 
			 	circle 
			 	@click="cancel()"
			 ></el-button>
			 <el-button 
			 	type="success" 
			 	icon="el-icon-check" 
			 	circle
			 ></el-button>
			 <el-button 
			 	type="success" 
			 	icon="el-icon-refresh"
				@click="refresh"
			 	circle
			 ></el-button>
			<el-input placeholder="请输入内容" v-model="select" class="input-with-select">
					<el-select v-model="select1" slot="prepend" placeholder="请选择">
					<el-option label="司机姓名" value=1></el-option>
					<el-option label="手机号" value=2></el-option>
					<el-option label="组织机构" value=3></el-option>
					</el-select>
					<el-button slot="append" icon="el-icon-search" @click="selectAll"></el-button>
			</el-input>
	  </el-row>
	  <div class="DriverBody" v-show="Vshow">
	  	 <div class="DriverSJ">司机信息</div>
		 <div class="DriverMess" v-show="Bshow">
			  <span class="title">司机姓名 :</span>
				 	<el-input
					    placeholder="请输入司机姓名"
						v-model="inputadd.driverName"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  <span class="title">手机号:</span>
				 	<el-input
					    placeholder="请输入手机号"
						v-model="inputadd.phone"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  <span class="title">身份证号码:</span>
				 	<el-input
					    placeholder="请输入身份证号码"
						v-model="inputadd.idCardNo"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  <div style="margin-top:.5rem">
			  <el-row :gutter="20">
			    <el-col :span="4">
				<span class="title" style="line-height:1.8rem">身份证图片:</span>
				</el-col>
					<el-col :span="20">
					<el-upload
						action="http://192.168.0.108:9001/file/upload"
						list-type="picture-card"
						:limit="2"
						name="file"
						:on-exceed="onExceed"
						:file-list="fileList1"
						:before-upload="beforeUpload"
						:on-preview="handlePictureCardPreview"
						:on-success="handleAvatarSuccess1"
						:on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
					</el-col>
				</el-row>
			  </div>
			  <div style="margin-top:.5rem">
			  	<span class="title">驾驶证号码:</span>
				 	<el-input
					    placeholder="请输入驾驶证号码"
						v-model="inputadd.drivingLicense"
						autocomplete="off"
						clearable
					>
			        </el-input>
				<span class="title">组织机构:</span>
				 	<el-select v-model="inputadd.companyId" placeholder="中永物流">
						<el-option
						v-for="item in options"
						:key="item.id"
						:label="item.companyName"
						:value="item.id">
						</el-option>
					</el-select>
			  </div>
			  <div style="margin-top:.5rem">
			  <el-row :gutter="20">
			   <el-col :span="4">
				<span class="title" style="line-height:1.8rem">驾驶证图片:</span>
				</el-col>
				<el-col :span="20">
					<el-upload
						action="http://192.168.0.108:9001/file/upload"
						list-type="picture-card"
						:limit="2"
						name="file"
						:on-exceed="onExceed"
						:file-list="fileList2"
						:before-upload="beforeUpload"
						:on-preview="handlePictureCardPreview"
						:on-success="handleAvatarSuccess2"
						:on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
					</el-col>
				</el-row>
			  </div>
			  <div style="margin-top:.5rem">
			  	<span class="title" style="line-height:1rem">备注:</span>
				 	<el-input
					 	type="textarea"
						:rows="2"
					    placeholder="备注"
						v-model="inputadd.remark"
						autocomplete="off"
						clearable
					>
			        </el-input>
			  </div>
			  <el-row class="DriverRow">
			  	 <el-button class="DriverCol" type="primary" @click="cancel">取消</el-button>
				 <el-button class="DriverCol" type="primary" @click="next">下一步</el-button>
			  </el-row>
		 </div>
		 <div class="DriverBess" v-show="Dshow">
		 	<el-table
				:data="tableData3"
				height="385"
				border
				style="width: 100%"
				tooltip-effect="dark"
				ref="tag"
				@selection-change="selectionRowsChange"
				>
				<el-table-column
				type="selection"
				width="55">
				</el-table-column>
				<el-table-column
				prop="driverName"
				label="已指派司机">
				</el-table-column>
				<el-table-column
				prop="plateNumber"
				label="车牌号">
				</el-table-column>
				<el-table-column
				prop="carLength"
				label="车长">
				</el-table-column>
				<el-table-column
				prop="typeName"
				label="车型">
				</el-table-column>
				<el-table-column
				prop="carVolume"
				label="体积">
				</el-table-column>
				<el-table-column
				prop="cardBoard"
				label="板数">
				</el-table-column>
				<el-table-column
				prop="carLoad"
				label="载重"
				min-width:80>
				</el-table-column>
				<el-table-column
				prop="companyName"
				label="组织机构">
				</el-table-column>
			</el-table>
			<div class="buttom">
				<el-pagination
				background
				:page-size="7"
				:current-page="currentPage"
				@current-change="handleCurrentChange"
				layout="total, prev, pager, next"
				:total="bottom">
				</el-pagination>
			</div>
			  <el-row class="DriverRow">
			  	 <el-button class="DriverCol" type="primary" @click="cancel(123)">取消</el-button>
				 <el-button class="DriverCol" type="primary" @click="getBack">返回</el-button>
				 <el-button class="DriverCol" type="primary" @click="deleteRow">提交</el-button>
			  </el-row>
		 </div>
	  </div>
	</div>
</template>

<script>
//设置全局表单提交格式
import {debounce} from '@/common/commons.js'
import eventVue from '@/common/eventVue.js'
import { mapState,mapMutations } from 'vuex'
export default {
	name:"DriverHeader",
	data(){
		return{
			dialogImageUrl: '',
        	dialogVisible: false,
			fileList1: [], //身份证图片显示列表
			fileList2: [], //驾驶证图片显示列表
			Bshow: true, //填写司机信息窗口
			Dshow: false, //绑定车辆窗口
			Vshow: false, //新增窗口
			select: "", //查询输入的内容
			select1:"", //查询类型
			url: null, //图片路径
			row: true, //选中的车辆
			options: [], //组织机构列表
			timer: null,
			currentPage: 1, //默认当前页
			curPages: null, //当前页
			bottom: null, //总页数
			inputadd:{
				driverName: "", //司机姓名
				phone: "", //手机号
				companyId: "", //组织机构
				idCardNo: "", //身份证号码
				idCardImg: "", //身份证图片;
				drivingLicense: "", //驾驶证号码		
				drivingLicenseImg: "",//驾驶证图片
				state: "1", //状态
				userName: null, //创建人
				remark: "", //备注
				carId: "", //车辆
			},
		tableData3: [],
		multipleSelection: [],
		}
	},
	methods: {
		//当前页
		handleCurrentChange(curPage){
			//this.currentPage=curPage
			//console.log(curPage);
			this.curPages=curPage
			this.find()
		},
		//选中项
		selectionRowsChange(val){
			this.multipleSelection=val;
		},
		//查询
		selectAll(){
			const _this=this
			console.log(_this.select1)
			if(_this.select1==1){
				this.axios.get(`${this.baseURL}/driver/findPage`,{
				params:{
		      		pages: 1,
					rows: 15,
					driverName: _this.select
		      	}
				}).then(res=>{
					const Data=res.data.data
					//eventVue .$emit("myFun",Data)
					_this.$emit("addHandler",Data)
					//console.log(Data);
					
				})
			}else if(_this.select1==2){
				this.axios.get(`${this.baseURL}/driver/findPage`,{
				params:{
		      		pages: 1,
					rows: 15,
					phone: _this.select
		      	}
				}).then(res=>{
					const Data=res.data.data
					_this.$emit("addHandler",Data)
				})
			}
		},
		//删除图片
		handleRemove(file, fileList) {
        	const _this=this
			const src=file.response.data
			let qs=require("qs");
			this.axios.post(`${this.baseURL}/file/deleteUpload`,
				qs.stringify({urlPath:src})
			).then(res=>{
			})
      	},
		//查看大图
		handlePictureCardPreview(file) {
        	this.dialogImageUrl = file.url;
        	this.dialogVisible = true;
      	},
		//上传成功(身份证图片)
		handleAvatarSuccess1(res, file){
			console.log(res.data);
			this.inputadd.idCardImg+=(';'+res.data)
		},
		//上传成功(驾驶证图片)
		handleAvatarSuccess2(res, file){
			//console.log(res.data);
			this.inputadd.drivingLicenseImg+=(';'+res.data)
		},	
		Drivershow(){

		},
		//刷新
		refresh(){
			this.changeisRouter(false)
			this.$nextTick(function(){
				this.changeisRouter(true)
			})
		},
		//取消
		cancel(val){
			this.Vshow=!this.Vshow;
			const _this=this
			if(this.Vshow==true){
				this.option()
			}
			this.find()
			if(val){
			this.changeisRouter(false)
			this.$nextTick(function(){
				this.changeisRouter(true) 
			})
			}
		},
		//提交
		deleteRow() {
			const _this = this
			if(_this.multipleSelection.length>1){
				_this.$message({
					message: '不能大于一',
					type: 'warning'
				});
			}else{
				if(_this.multipleSelection[0]){
				_this.inputadd.carId=_this.multipleSelection[0].id
				if(_this.multipleSelection[0].driverName){
				this.$confirm('该车辆已绑定了司机, 是否替换?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
					_this.create()
					}).catch(() => {

					})
				}else{
					_this.create();
				}	
				}else{
					_this.create();
				}
			}
		},
		//显示车辆
		find(){
			const _this=this
			this.axios.get(`${this.baseURL}/car/findPage`,{
				params:{
					pages:this.curPages,
					rows:7
				}
			}).then(res=>{
					const com=res.data.data
					const colcom=com.slice(com.length-1,com.length)
					const newcom=com.slice(0,com.length-1)
					_this.bottom=colcom[0].countPage
					_this.tableData3=newcom
				}
			)
		},
		//下一步
		next(){
			this.Bshow=false,
			this.Dshow=true
		},
		//返回
		getBack(){
			this.Bshow=true,
			this.Dshow=false
			// const tags = this.$refs.tag
			// tags.classList.remove("is-checked")
		},
		//选择组织机构
		option(){
			const _this=this
			this.axios.get(`${this.baseURL}/company/findAll`,{
				params:{
				}
			}).then(res=>{
				res=res.data.data
				_this.options=res
			})
		},
		//提交最终
		create(){
			var _this=this
			if(_this.inputadd.driverName!=null){

			if(_this.inputadd.companyId==""){
				_this.inputadd.companyId="1"
			}
			const session=sessionStorage.getItem('user')
			const se=session.substring(1,session.length-1)
			_this.inputadd.userName = se
			_this.timer = setTimeout(()=>{
			let qs = require('qs')
			this.axios.post(`${this.baseURL}/driver/save`,
					qs.stringify(_this.inputadd)
				).then(res=>{
					if(res.data.status==200){
						
						_this.Vshow=false
						_this.$message({
							message: '添加成功',
							type: 'success'
						});
						this.changeisRouter(false)
						this.$nextTick(function(){
							this.changeisRouter(true) 
						})
					}else{
						_this.$message({
					        message: '添加失败',
					        type: 'warning'
					    })
					}
				})
			},300)
			}else{
				_this.$message({
					message: '请填写姓名',
					type: 'warning'
				})
			}
		},
		...mapMutations(['changeisRouter']),
		//上传图片的个数
		onExceed(files, fileList) {
            this.$message.error("上传图片不能超过2张");
			console.log(fileList);
        },
		//文件上传前的前的钩子函数
        //参数是上传的文件，若返回false，或返回Primary且被reject，则停止上传
        beforeUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isGIF = file.type === 'image/gif';
            const isPNG = file.type === 'image/png';
            const isBMP = file.type === 'image/bmp';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG && !isGIF && !isPNG && !isBMP) {
                this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
        },  
	},
	computed: {
		 ...mapState(['isRouterAlive'])
	},
	mounted() {
		this.option()	
	},
}
</script>

<style scoped>
	.Driverindex{
		margin-bottom: 0.2rem;
		margin-left:0.2rem;
		position:relative;
	}
	.Driverindex >>> .el-table td,.Driverindex  >>> .el-table th {
		text-align: center;
	}
	.Driverindex >>> .el-button.is-circle {
		padding:0.1rem;
	}
	.Driverindex .DriverBody{
		width:10rem;
		border-radius: 0.2rem;
		min-width:800px;
		z-index: 11111;
		position:absolute;
		top:10%;
		left:50%;
		box-shadow: 0 0 0.5rem #cac6c6;
		transform: translate(-50%,10%);
        overflow: hidden;
	}
	.Driverindex .DriverBody .DriverSJ{
		width:100%;
		border: .02rem solid #eaeaea;
		background:#20A0FF;
		position:relative;
		text-align: center;
		line-height: .8rem;
		color:#fff;
		font-size: 0.34rem;
		font-weight: bold
	}
	.Driverindex .DriverBody .DriverMess{
		padding-top:.2rem;
		background-color:#fff;
		border: .02rem solid #eaeaea;
	}
	.Driverindex .DriverBody .DriverMess .title{
		margin-left:.2rem
	}
	.Driverindex .DriverBody .DriverMess >>> .el-textarea{
		width:50%
	}
	.Driverindex .DriverBody .DriverMess >>> .el-input{
		width:23%;
	}
	.Driverindex .DriverBody .DriverMess >>> .el-select .el-input{
		width:100%
	}
	.Driverindex .DriverBody .DriverMess >>> .el-select .el-input__icon{
		line-height:.7rem
	}
	.Driverindex .DriverBody .DriverMess >>> .el-input__inner{
		display:left;
		height:.6rem
	}
	.Driverindex .DriverBody .DriverMess >>> .el-upload--picture-card{ 
		line-height:0;
		width:2rem;
		height:2rem
	}
	.Driverindex .DriverBody .DriverMess >>> .el-upload--picture-card i{
		line-height:2rem;
		
	}
	.Driverindex .DriverBody .DriverMess >>> .el-upload-list--picture-card .el-upload-list__item-actions{
		width:2rem;
		height:2rem;
	}
	.Driverindex .DriverBody .DriverMess >>> .el-upload-list__item{
		width:2rem;
		height:2rem
	}
	.Driverindex .DriverBody .DriverRow{
		text-align:center;
	}
	.Driverindex .DriverBody .DriverCol{
		width:2rem;
		margin:.2rem
	}
	.Driverindex .DriverBody .DriverBess{
		padding:.2rem;
		background-color:#fff;
		box-shadow: 0 0 0.5rem #cac6c6;
		border: .02rem solid #eaeaea;
	}
	.Driverindex .DriverBody .DriverBess .buttom{
		text-align:center;
	}
	.Driverindex .elrow >>> .el-input__inner{
		height:.7rem;
	}
	.Driverindex .elrow .selectId >>>  .el-input{
		width: 3rem;
	}
	.Driverindex .elrow >>> .el-input-group__prepend .el-select .el-input {
		width: 2.5rem;
	}
	.Driverindex .elrow >>> .input-with-select .el-input-group__prepend {
		background-color: #fff;
	}
	.Driverindex .elrow >>> .el-input{
		width:0;
		margin-left:.4rem
	}
</style>